<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0
			}
			
			ul {
				list-style: none;
				margin-top: 30px;
			}
			
			.box {
				width: 600px;
				margin: 100px auto;
				border: 1px solid #ededed;
				border-radius: 3px;
				padding: 20px;
			}
			
			textarea {
				width: 100%;
				height: 68px;
				outline: none;
				resize: none;
				padding: 5px;
			}
			
			ul {
				width: 450px;
				padding-left: 80px;
			}
			
			ul li {
				line-height: 25px;
				border-bottom: 1px dashed #ededed;
			}
			
			.title {
				float: left;
			}
			
			.num {
				float: left;
			}
			
			.input {
				margin-top: 4px;
				padding: 5px;
			}
			
			.func {
				float: right;
			}
			
			#btn {
				display: inline-block;
				height: 28px;
				line-height: 29px;
				width: 60px;
				min-width: 40px;
				font-size: 14px;
				background-color: #F77C3D;
				color: #fff;
				box-shadow: none;
				cursor: default;
				border: 1px solid #f77c3d;
				outline: none;
				padding: 0 10px;
				border-radius: 2px;
				text-align:center;
			}
			
			input {
				float: right;
			}
		</style>
	</head>

	<body>
		<div class="box" id="weibo">
			<div>
				<div class="title">有什么新鲜事想告诉大家</div>
			</div>
			<div style="clear: both"></div>
			<div class="input">
				<textarea name="txt" id="txt" cols="20" rows="10" maxlength="140" autofocus="autofocus"></textarea>
			</div>
			<div class="num"><span id='num'>140</span>字</div>
			<div class="func">
				<a id="btn">写好了</a>
			</div>
			<div style="clear: both"></div>
			<div>
				<ul id="ul"></ul>
			</div>
		</div>
		<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var txt = document.getElementById("txt");
			var btn = document.getElementById("btn");
			var ul = document.getElementById("ul");
			var num = document.getElementById("num");
			btn.onclick = function() {
				if(txt.value.trim() == '') {
					alert('请写点什么吧');
				}

				else if(confirm('确定写好了吗？')) {
					var isHealthy = true;
					ajax('./18jinwords.php', 'post', 'txt=' + txt.value, 'text', function(data) {
						if(data == 1) {
							isHealthy = false;
						}
					});
					if(isHealthy == false) {
						alert('你是一个四有青年，请文明发言好咩');
					}
					var li = document.createElement('li');
					li.innerHTML = txt.value;
					ul.appendChild(li);
					txt.value = '';
					var lis = document.getElementsByTagName('li');
					if(lis == 0){
						ul.appendChild(li)
					}else{
						ul.insertBefore(li,lis[0]);
					}
				}
			};
			window.onkeydown = function(e){
				if(e.keyCode == 13){
					btn.onclick();
				}
			}
			var numdefault = parseInt(num.innerText);
			txt.onkeyup = function() {
				if(txt.value.length <= numdefault) {
					var calc = numdefault - txt.value.length;
					num.innerHTML = calc;
				}
			}
		</script>

	</body>

</html>